<template>
    <div>
       <h2>购物车列表</h2>
       <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>名称</td>
                    <td>数量</td>
                    <td>价格</td>
                    <td>小计</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item._id">
                    <td>
                        <input type="checkbox" v-model="item.checked" @change="checkedShopcart(item._id)">
                    </td>
                    <td>{{item.name}}</td>
                    <td>
                        <button @click="changeNum({_id:item._id,n:-1})">-</button>
                        {{item.num}}
                        <button @click="changeNum({_id:item._id,n:1})">+</button>
                    </td>
                    <td>{{item.price}}</td>
                    <td>{{item.num*item.price}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        总价：{{total}}
                    </td>
                </tr>
            </tfoot>
       </table>
    </div>
</template>

<script>
import {mapActions,mapState,mapGetters} from 'vuex'
export default {
    methods:{
        //...mapActions(["getShopcartList_Async","changeNum_Async"]),
        ...mapActions({"getShopcartList_giles":"getShopcartList_Async","changeNum_giles":"changeNum_Async"}),
        getShopcartList(){
            this.getShopcartList_giles()
        },
        changeNum(payload){
            this.changeNum_giles(payload)
        }
    },
    computed:{
        ...mapState({"list":"shopcartList"}),
        ...mapGetters({"total":"totalPrice"})
    },
    created(){
        this.getShopcartList()
    }
}
</script>

<style>

</style>